<template>
	<view class="container">
	    <view class="top">
			<Top :deck="deck"></Top>
		</view>
	    <view class="middle">
			<Middle :deck="deck" :outPool="outPool"></Middle>
		</view>
	    <view class="bottom">
			<Bottom :deck="deck" :handPool="handPool"></Bottom>
		</view>
	    <view class="footer">
			<Footer :deck="deck" :handPool="handPool" :outPool="outPool"></Footer>
		</view>
	  </view>
</template>

<script>
	import Top from '../components/top/top.vue'
	import Middle from '../components/middle/middle.vue'
	import Bottom from '../components/bottom/bottom.vue'
	import Footer from '../components/footer/footer.vue'
	export default {
		components: { Top, Middle, Bottom, Footer },
		data() {
			return {
				title: 'Hello',
				// 牌堆
				deck: {
					total: 108,
					tongCount: 36,
					wanCount: 36,
					tiaoCount: 36,
					deckPool: [
						1,1,1,1,
						2,2,2,2,
						3,3,3,3,
						4,4,4,4,
						5,5,5,5,
						6,6,6,6,
						7,7,7,7,
						8,8,8,8,
						9,9,9,9,
						11,11,11,11,
						12,12,12,12,
						13,13,13,13,
						14,14,14,14,
						15,15,15,15,
						16,16,16,16,
						17,17,17,17,
						18,18,18,18,
						19,19,19,19,
						21,21,21,21,
						22,22,22,22,
						23,23,23,23,
						24,24,24,24,
						25,25,25,25,
						26,26,26,26,
						27,27,27,27,
						28,28,28,28,
						29,29,29,29,
					],
					
				},
				outPool: [],
				handPool: [],
			}
		},
		onload() {
			this.shuffle()
			this.getHandPool()
		},
		methods: {
			shuffle() {
				console.log(this.deck.deckPool);
				console.log(this.deck.deckPool.length)
				for (let i = this.deck.deckPool.length - 1; i > 0; i--) {
				  let randomIndex = Math.floor(Math.random() * (i + 1)); // 生成随机下标
				  [this.deck.deckPool[i], this.deck.deckPool[randomIndex]] = [this.deck.deckPool[randomIndex], this.deck.deckPool[i]]; // 交换元素位置
				}
				console.log(this.deck.deckPool)
			},
			getHandPool() {
				this.handPool = this.deck.deckPool.splice(0,14);
			}
		},
	}
</script>

<style>
	.container {
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	}
	
	.top {
	  height: calc(10%);
	}
	
	.middle {
	  height: calc(33.5%);
	  background-color: #d9d9d9;
	}
	
	.bottom {
	  height: calc(23%);
	  background-color: #c0c0c0;
	}
	
	.footer {
	  height: calc(33.5%);
	  background-color: #ffff7f;
	}
</style>
